<template>
  <div class="right-card">
    <m-card title="用电情况" :height="300">
      <div class="box">
        <div>
          <div>82923</div>
          <div class="tit">今年累计金额</div>
        </div>
        <div>
          <div>82923</div>
          <div class="tit">今年累计次数</div>
        </div>

        <div>
          <div>82923</div>
          <div class="tit">当月累计金额</div>
        </div>

        <div>
          <div>82923</div>
          <div class="tit">当月累计次数</div>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import mCard from "@/components/mCard/index.vue";
</script>

<style lang="scss" scoped>
.right-card {
  :deep(*) {
    .box {
      display: flex;
      height: 90%;
      justify-content: space-around;
      align-items: center;

      & > div {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: radial-gradient(rgb(111, 167, 226), rgb(28, 87, 148));
        color: white;
        line-height: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        position: relative;

        &:nth-child(2) {
          background: radial-gradient(rgb(126, 111, 101), rgb(116, 64, 29));
        }

        &:nth-child(3) {
          background: radial-gradient(rgb(89, 122, 119), rgb(33, 92, 85));
        }

        &:nth-child(4) {
          background: radial-gradient(rgb(102, 82, 146), rgb(66, 36, 130));
        }

        .tit {
          position: absolute;
          bottom: -60px;
          font-size: 12px;
        }
      }
    }
  }
}

</style>
